

<template>
  <div class="teachers-file-folder">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>教师档案分析</h2>
      </div>
      <div class="header-right">
        
      </div>
    </div>

    <!-- 筛选条件区域 -->
    <div class="filter-container">
        <div class="filter-row">
            <div class="filter-item">
                <label>年份：</label>
                <el-select 
                    v-model="selectedYear" 
                    placeholder="年份" 
                    style="width: 100px;"
                    clearable
                    @change="onYearChange"
                >
                    <el-option
                        v-for="year in yearList"
                        :key="year.value"
                        :label="year.label"
                        :value="year.value"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <label>学院：</label>
                <el-select 
                    v-model="selectedCollege" 
                    placeholder="学院" 
                    style="width: 150px;"
                    clearable
                    @change="onCollegeChange"
                >
                    <el-option
                        v-for="college in collegeList"
                        :key="college.value"
                        :label="college.label"
                        :value="college.value"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <label>项目：</label>
                <el-select 
                    v-model="selectedProject" 
                    placeholder="项目" 
                    style="width: 150px;"
                    clearable
                    @change="onProjectChange"
                >
                    <el-option
                        v-for="project in projectList"
                        :key="project.value"
                        :label="project.label"
                        :value="project.value"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <label>老师：</label>
                <el-select 
                    v-model="selectedTeacher" 
                    placeholder="老师" 
                    style="width: 120px;"
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    @change="onTeacherChange"
                    @blur="validateTeacherInput"
                >
                    <el-option
                        v-for="teacher in teacherList"
                        :key="teacher.value"
                        :label="teacher.label"
                        :value="teacher.value"
                    />
                </el-select>
            </div>
            <div class="filter-actions">
                <el-button 
                    type="primary" 
                    @click="queryData"
                    :loading="queryLoading"
                    icon="el-icon-search"
                >
                    查询数据
                </el-button>
                <el-button 
                    @click="resetFilters"
                    icon="el-icon-refresh-left"
                >
                    重置
                </el-button>
            </div>
        </div>
    </div>

    <div class="charts-container">
         <!-- 雷达图 -->
         <div class="chart-left">
             <h3>{{ radarChartTitle }}</h3>
             <!-- 个人荣誉-日常教学常规-教育教学改革-科学研究与社会服务-产教融合 -->
             <div ref="echartradarRef1" style="width:100%; height: 400px;"></div>
             <!-- 老师雷达图加载提示 -->
             <div v-if="teacherRadarLoading" class="chart-loading-tip">
                 <i class="el-icon-loading"></i>
                 <span>正在加载老师雷达图数据...</span>
             </div>
         </div>

          <!-- 折线图 -->
          <div class="chart-right">
              <h3>{{ lineChartTitle }}</h3>
              <!-- 基于雷达图，单个维度，5条折线 -->
              <div ref="chartRef" style="width: 100%; height: 400px;"></div>
              <!-- 老师折线图加载提示 -->
              <div v-if="teacherLineLoading" class="chart-loading-tip">
                  <i class="el-icon-loading"></i>
                  <span>正在加载老师折线图数据...</span>
              </div>
          </div>
     </div>
  </div>
</template>


<script>
import * as echarts from "echarts"

const option = {
  tooltip: {},
  legend: {
    show: true,
    data: ['默认数据'],
    top: 10,
    left: 'center',
    textStyle: {
      color: '#333',
      fontSize: 12
    },
    itemWidth: 10,
    itemHeight: 6,
    itemGap: 15
  },
  radar: {
    center: ['50%', '55%'],
    radius: '60%',
    axisName: {
      textStyle: {
        color: '#333',
        fontSize: 20,
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [
      { name: '个人荣誉', max: 5 },
      { name: '日常教学常规', max: 5 },
      { name: '教育教学改革', max: 5 },
      { name: '科学研究与社会服务', max: 5 },
      { name: '产教融合', max: 5 }
    ],
    splitArea: {
      areaStyle: {
        color: [
          'rgba(255,255,255, 0.5)',
          'rgba(255,255,255, 0.3)',
          'rgba(255,255,255, 0.2)',
          'rgba(255,255,255, 0.2)',
          'rgba(255,255,255, 0.1)'
        ],
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowBlur: 10
      }
    }
  },
  series: [
    {
      name: '',
      type: 'radar',
      data: [
        {
          value: [3, 3, 3, 3, 3],
          name: '默认数据',
          lineStyle: {
            color: '#CCCCCC',
            type: 'dashed'
          },
          areaStyle: {
            color: 'rgba(204, 204, 204, 0.2)'
          }
        }, {
          value: [3, 3, 3, 3, 3],
          name: '默认数据',
          lineStyle: {
            color: '#CCCCCC',
            type: 'dashed'
          },
          areaStyle: {
            color: 'rgba(204, 204, 204, 0.2)'
          }
        }
      ]
    }
  ]
};
const options = {
    title: {
      text: '教师档案各维度发展趋势',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['个人荣誉', '日常教学常规', '教育教学改革', '科学研究与社会服务', '产教融合'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 5,
      axisLabel: {
        color: '#666'
      }
    },
    series: [
      {
        name: '个人荣誉',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: {
          color: '#FACC14'
        },
        itemStyle: {
          color: '#FACC14'
        }
      },
      {
        name: '日常教学常规',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: {
          color: '#2FC25B'
        },
        itemStyle: {
          color: '#2FC25B'
        }
      },
      {
        name: '教育教学改革',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: {
          color: '#1890FF'
        },
        itemStyle: {
          color: '#1890FF'
        }
      },
      {
        name: '科学研究与社会服务',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: {
          color: '#F04864'
        },
        itemStyle: {
          color: '#F04864'
        }
      },
      {
        name: '产教融合',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: {
          color: '#722ED1'
        },
        itemStyle: {
          color: '#722ED1'
        }
      }
    ]
  };

// 接口路径常量定义
const SMARTLOCK_API = {
  SELECT_YEAR_LIST: '/api/project/years/list',
  SELECT_COLLEGE_LIST: '/api/course/getallcolleges',
  SELECT_PROJECT_LIST: '/api/teach/count/year/project',
  SELECT_TEACHER_LIST: '/api/teach/count/radar/chart/Teacherbycollege',
  //查询学院雷达图
  SELECT_RADAR_CHART: '/api/teach/count/teachAll',
  //查询老师雷达图
  SELECT_TEACHER_RADAR_CHART: '/api/teach/count/radar/chart/teacher',
  //查询老师折线图
  SELECT_TEACHER_LINE_CHART: '/api/teach/count/radar/chart/analysisteacher',
};
export default {
    name: 'teachersfilefolder',
    data() {
        return {
            loading: false,
            option: option,
            options: options,
            // 筛选条件相关
            selectedYear: '',
            selectedCollege: '',
            selectedProject: '',
            selectedTeacher: '',
            queryLoading: false,
            radarChartData: null,
            teacherRadarChartData: null,
            teacherLineChartData: null,
            radarChartTitle: '教师档案综合评估',
            lineChartTitle: '教师档案各维度发展趋势',
            teacherRadarLoading: false,
            teacherLineLoading: false,
            yearList: [
               
            ],
            collegeList: [
               
            ],
            projectList: [
                { value: 'project1', label: '教学质量提升项目' },
                { value: 'project2', label: '科研能力建设项目' },
                { value: 'project3', label: '产教融合示范项目' },
                { value: 'project4', label: '师资队伍建设项目' },
                { value: 'project5', label: '课程体系改革项目' }
            ],
            teacherList: [
                { value: 'teacher1', label: '张教授' },
                { value: 'teacher2', label: '李老师' },
                { value: 'teacher3', label: '王副教授' },
                { value: 'teacher4', label: '刘老师' },
                { value: 'teacher5', label: '陈教授' }
            ]
        }
    },
    async mounted() {
    // 先检查登录状态和token
    this.checkAuth();
    // 获取年份列表
    this.getYearList();
    //  获取学院列表
    this.getCollegeList();
    // 初始化雷达图
    this.initRadarChart();
    // 初始化折线图
    this.initLineChart();
  },
  activated() {
    // 页面切换回来时重新初始化图表
    console.log('页面activated，重新初始化图表');
    this.$nextTick(() => {
      // 重新初始化雷达图
      if (this.$refs.echartradarRef1) {
        this.initRadarChart();
      }
      // 重新初始化折线图（清空数据）
      if (this.$refs.chartRef) {
        this.initLineChart();
      }
    });
  },
    methods: {
        // 检查认证状态
    checkAuth() {
      const Cookie = require('js-cookie');
      const token = Cookie.get('token');
      if (!token || token.trim() === '') {
        this.$message.error('请先登录');
        this.$router.push('/login');
        return false;
      }
      return true;
    },
    
    // 监听年份选择变化
    onYearChange(value) {
      console.log('年份选择变化：', value);
      if (value) {
        console.log('年份被选择：', this.getYearName(value));
        if(this.selectedCollege!=''){
            this.$get(SMARTLOCK_API.SELECT_PROJECT_LIST, {
              year: this.selectedYear,
              college: this.selectedCollege,
            }).then(res => {
              if(res && res.code === 200 && res.data && Array.isArray(res.data)) {
                //截取项目列表
                this.projectList = res.data.map(item => ({
                  value: item.id,
                  label: item.title
                }));
              }else{
                this.$message.warning("项目列表获取失败")
              }
            })
          }
        
        this.$message.success(`已选择年份：${this.getYearName(value)}`);
      } else {
        console.log('年份被清空');
        this.$message.info('年份选择已清空');
      }
      this.checkAllSelections();
    },
    
    // 监听学院选择变化
    onCollegeChange(value) {
      console.log('学院选择变化：', value);
      if (value) {
        console.log('学院被选择：', this.getCollegeName(value));
        if(this.selectedYear!=''){
            this.$get(SMARTLOCK_API.SELECT_PROJECT_LIST, {
              year: this.selectedYear,
              college: this.selectedCollege,
            }).then(res => {
              if(res && res.code === 200 && res.data && Array.isArray(res.data)) {
                //截取项目列表
                this.projectList = res.data.map(item => ({
                  value: item.id,
                  label: item.title
                }));
              }else{
                this.$message.warning("项目列表获取失败")
              }
            })
          }
          //学院被选择，加载老师列表
          this.$get(SMARTLOCK_API.SELECT_TEACHER_LIST, {
            college:this.selectedCollege,
          }).then(res => {
            if(res && res.code === 200 && res.data && Array.isArray(res.data)) {
              this.teacherList = res.data.map(item => ({
                value: item.userId,
                label: item.nickName
              }));
              
            }else{
              this.$message.warning("老师列表获取失败")
            }
          })
        this.$message.success(`已选择学院：${this.getCollegeName(value)}`);
      } else {
        console.log('学院被清空');
        this.$message.info('学院选择已清空');
      }
      this.checkAllSelections();
    },
    
    // 监听项目选择变化
    onProjectChange(value) {
      console.log('项目选择变化：', value);
      if (value) {
        console.log('项目被选择：', this.getProjectName(value));
        this.$message.success(`已选择项目：${this.getProjectName(value)}`);
      } else {
        console.log('项目被清空');
        this.$message.info('项目选择已清空');
      }
      this.checkAllSelections();
    },
    
    // 监听老师选择变化
    onTeacherChange(value) {
      console.log('老师选择变化：', value);
      if (value) {
        console.log('老师被选择：', this.getTeacherName(value));
        this.$message.success(`已选择老师：${this.getTeacherName(value)}`);
      } else {
        console.log('老师被清空');
        this.$message.info('老师选择已清空');
      }
      this.checkAllSelections();
    },
    
    // 验证老师输入
    validateTeacherInput() {
      if (this.selectedTeacher) {
        // 检查输入的老师是否在列表中
        const isValidTeacher = this.teacherList.some(teacher => 
          teacher.value === this.selectedTeacher || 
          teacher.label === this.selectedTeacher
        );
        
        if (!isValidTeacher) {
          console.log('输入的老师不在列表中，自动清空');
          this.$message.warning('输入的老师不存在，已自动清空');
          this.selectedTeacher = '';
        } else {
          console.log('输入的老师验证通过');
        }
      }
    },
    
    // 检查所有选择状态
    checkAllSelections() {
      const selections = {
        year: this.selectedYear,
        college: this.selectedCollege,
        project: this.selectedProject,
        teacher: this.selectedTeacher
      };
      
      console.log('当前所有选择状态：', selections);
      
      // 检查是否有选择
      const hasAnySelection = Object.values(selections).some(val => val);
      console.log('是否有选择：', hasAnySelection);
      
      // 检查是否全部选择
      const hasAllSelections = Object.values(selections).every(val => val);
      console.log('是否全部选择：', hasAllSelections);
      
      // 获取选择的数量
      const selectionCount = Object.values(selections).filter(val => val).length;
      console.log('已选择数量：', selectionCount);
      
      // 可以在这里添加其他逻辑，比如自动查询
      if (hasAnySelection) {
        console.log('至少有一个筛选条件被选择，可以执行查询');
      } else {
        console.log('没有选择任何筛选条件');
      }
    },
    getCollegeList() {
        this.$get(SMARTLOCK_API.SELECT_COLLEGE_LIST).then(res => {
        if(res && res.code === 200 && res.data && Array.isArray(res.data)) {
            //填充学院字段
            this.collegeList = res.data.map(item => ({
                value: item,
                label: item
            }));
        }else{
            this.$message.warning("学院获取失败")
        }
        }).catch(error => {
            this.$message.error("学院获取失败")
        });
        
    },
    // 获取年份列表
    getYearList() {
      this.$get(SMARTLOCK_API.SELECT_YEAR_LIST).then(res => {
        if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
          // 根据响应格式 {"msg":"success","code":200,"data":["2024","2023"]} 处理数据
          this.yearList = res.data.map(year => ({
            value: String(year),
            label: `${year}年`
          }));
         
        } else {
          
          this.$message.warning('年份列表数据格式异常，使用默认年份');
        }
      }).catch(error => {
        
        this.$message.error('获取年份列表失败，使用默认年份');
        // 如果接口调用失败，保持默认的年份列表
      });
    },
        // 初始化雷达图
        initRadarChart() {
            this.$nextTick(() => {
                const chartDom = this.$refs.echartradarRef1;
                if (chartDom) {
                    const myChart = echarts.init(chartDom);
                    myChart.setOption(this.option);
                    
                    // // 监听窗口大小变化
                    // window.addEventListener('resize', () => {
                    //     myChart.resize();
                    // });
                }
            });
        },
        initLineChart() {
            this.$nextTick(() => {
                const chartDom = this.$refs.chartRef;
                if (chartDom) {
                    const myChart = echarts.init(chartDom);
                    // 确保使用空数据配置
                    const emptyOptions = {
                        ...this.options,
                        xAxis: {
                            ...this.options.xAxis,
                            data: []
                        },
                        series: this.options.series.map(s => ({
                            ...s,
                            data: []
                        }))
                    };
                    myChart.setOption(emptyOptions);
                }
            });
        },
        
        // 更新雷达图数据
        updateRadarChart(data) {
            if (data && data.metrics && data.value) {
                console.log('开始更新雷达图数据：', data);
                
                // 更新雷达图标题
                const collegeName = this.getCollegeName(this.selectedCollege) || '全部';
                this.radarChartTitle = `${collegeName} 教师档案综合评估`;
                
                // 更新雷达图的indicator配置
                this.option.radar.indicator = data.metrics.map(metric => ({
                    name: metric,
                    max: 5
                }));
                
                // 更新雷达图的数据 - 只保留一条数据线
                this.option.series[0].data = [{
                    value: data.value,
                    name: '教师档案分析',
                    lineStyle: {
                        color: '#FACC14'
                    },
                    areaStyle: {
                        color: 'rgba(250, 204, 20, 0.3)'
                    }
                }];
                
                // 更新图例数据
                this.option.legend.data = ['教师档案分析'];
                
                // 重新渲染雷达图
                this.$nextTick(() => {
                    const chartDom = this.$refs.echartradarRef1;
                    if (chartDom) {
                        // 获取或创建ECharts实例
                        let myChart = echarts.getInstanceByDom(chartDom);
                        if (!myChart) {
                            myChart = echarts.init(chartDom);
                        }
                        // 使用 notMerge: true 强制重新渲染
                        myChart.setOption(this.option, true);
                        console.log('雷达图已重新渲染', this.option);
                    }
                });
                
                console.log('雷达图数据已更新：', {
                    metrics: data.metrics,
                    values: data.value
                });
            } else {
                console.warn('雷达图数据格式不正确：', data);
            }
        },
        // 查询数据
        queryData() {
            if (!this.selectedYear && !this.selectedCollege && !this.selectedProject && !this.selectedTeacher) {
                this.$message.warning('请至少选择一个筛选条件');
                return;
            }
            
            this.queryLoading = true;
            
            // 只有选择了项目，才查询雷达图数据
            if (this.selectedProject) {
              console.log('已选择项目，查询雷达图数据');
              
              this.$post(SMARTLOCK_API.SELECT_RADAR_CHART, {
                year: this.selectedYear,
                projectId: this.selectedProject,
                college: this.selectedCollege,
              }, {
                timeout: 60000  // 设置60秒超时时间
              }).then(res => {
                if(res && res.code === 200 && res.data) {
                  console.log('获取到雷达图数据：', res.data);
                  this.radarChartData = res.data;
                  
                  // 如果没有选择老师，才单独渲染学院雷达图
                  // 如果选择了老师，等老师雷达图接口返回后一起渲染
                  if (!this.selectedTeacher) {
                    this.updateRadarChart(res.data);
                    this.$message.success('雷达图数据加载成功');
                  }
                  this.queryLoading = false;
                } else {
                  this.queryLoading = false;
                  this.$message.warning("雷达图数据获取失败");
                }
              }).catch(error => {
                this.queryLoading = false;
                console.error('雷达图数据获取错误：', error);
                if (error.code === 'ECONNABORTED') {
                  this.$message.error('雷达图数据请求超时，请稍后重试');
                } else {
                  this.$message.error('雷达图数据获取失败');
                }
              });
            } else {
              console.log('未选择项目，跳过雷达图查询');
              this.queryLoading = false;
            }
            
            //如果有老师，查询老师相关数据
            if(this.selectedTeacher){
              // 只有选择了项目，才查询老师雷达图
              if (this.selectedProject) {
                console.log('开始请求老师雷达图数据，参数：', {
                  teacherId: this.selectedTeacher,
                  projectId: this.selectedProject
                });
                
                this.teacherRadarLoading = true;
                
                this.$post(SMARTLOCK_API.SELECT_TEACHER_RADAR_CHART, {
                  teacherId: this.selectedTeacher,
                  projectId: this.selectedProject,
                }, {
                  timeout: 300000  // 设置300秒（5分钟）超时时间
                }).then(res => {
                console.log('老师雷达图接口响应：', res);
                
                // 检查响应状态
                if (res && res.code === 200) {
                  // 检查是否有数据
                  if (res.data && res.data.metrics && res.data.value) {
                    console.log('获取到老师雷达图数据：', res.data);
                    this.teacherRadarChartData = res.data;
                    //渲染老师雷达图
                    this.updateTeacherRadarChart(res.data);
                    this.teacherRadarLoading = false;
                  } else {
                    // 数据为空，显示提示并清空雷达图
                    console.warn('老师雷达图数据为空');
                    this.teacherRadarLoading = false;
                    this.$message.warning('该教师暂无雷达图数据');
                    // 清空教师雷达图数据，只保留学院数据
                    this.clearTeacherRadarChart();
                  }
                } else {
                  console.error('老师雷达图接口返回异常：', res);
                  this.teacherRadarLoading = false;
                  this.$message.error(`老师雷达图数据获取失败：${res.msg || '接口返回异常'}`);
                }
              }).catch(error => {
                console.error('老师雷达图数据获取错误：', error);
                console.error('错误详情：', {
                  message: error.message,
                  code: error.code,
                  status: error.response && error.response.status,
                  statusText: error.response && error.response.statusText
                });
                
                this.teacherRadarLoading = false;
                
                if (error.code === 'ECONNABORTED') {
                  this.$message.error('老师雷达图数据请求超时（5分钟），请稍后重试');
                } else if (error.response && error.response.status === 500) {
                  this.$message.error('服务器内部错误，请稍后重试');
                } else if (error.response && error.response.status === 404) {
                  this.$message.error('接口不存在，请检查接口地址');
                } else {
                  this.$message.error(`老师雷达图数据获取失败：${error.message}`);
                }
              });
              } else {
                console.log('未选择项目，跳过老师雷达图查询');
              }

              // 查询折线图（不需要项目ID）
              console.log('开始请求老师折线图数据，参数：', {
                teacherId: this.selectedTeacher
              });
              this.teacherLineLoading = true;
              
              this.$post(SMARTLOCK_API.SELECT_TEACHER_LINE_CHART, {
                teacherId: this.selectedTeacher,
              }, {
                timeout: 300000  // 设置300秒（5分钟）超时时间
              }).then(res => {
                console.log('老师折线图接口响应：', res);
                
                // 检查响应状态
                if (res && res.code === 200) {
                  // 检查是否有数据
                  if (res.data && Array.isArray(res.data) && res.data.length > 0) {
                    console.log('获取到老师折线图数据：', res.data);
                    this.teacherLineChartData = res.data;
                    //渲染老师折线图
                    this.updateTeacherLineChart(res.data);
                    this.teacherLineLoading = false;
                  } else {
                    // 数据为空，显示提示并清空折线图
                    console.warn('老师折线图数据为空');
                    this.teacherLineLoading = false;
                    this.$message.warning('该教师暂无折线图数据');
                    // 清空折线图
                    this.clearTeacherLineChart();
                  }
                } else {
                  console.error('老师折线图接口返回异常：', res);
                  this.teacherLineLoading = false;
                  this.$message.error(`老师折线图数据获取失败：${res.msg || '接口返回异常'}`);
                }
              }).catch(error => {
                console.error('老师折线图数据获取错误：', error);
                this.teacherLineLoading = false;
                
                if (error.code === 'ECONNABORTED') {
                  this.$message.error('老师折线图数据请求超时（5分钟），请稍后重试');
                } else {
                  this.$message.error(`老师折线图数据获取失败：${error.message}`);
                }
              });

            }
           
        },
        
        // 更新老师雷达图数据
        updateTeacherRadarChart(data) {
            if (data && data.metrics && data.value) {
                console.log('开始更新老师雷达图数据：', data);
                console.log('当前学院雷达图数据：', this.radarChartData);
                
                // 更新雷达图标题
                const collegeName = this.getCollegeName(this.selectedCollege) || '全部';
                const teacherName = this.getTeacherName(this.selectedTeacher);
                this.radarChartTitle = `${collegeName} 教师档案综合评估 (${teacherName})`;
                
                // 更新雷达图的indicator配置
                this.option.radar.indicator = data.metrics.map(metric => ({
                    name: metric,
                    max: 5
                }));
                
                // 准备学院数据和教师数据
                // 注意：数组中后面的元素会绘制在前面元素的上方
                // 所以先添加教师数据，再添加学院数据，这样学院数据会显示在上层
                const seriesData = [];
                const legendData = [];
                
                // 先添加教师数据线（底层）
                console.log('添加教师数据线：', data.value);
                seriesData.push({
                    value: data.value,
                    name: this.getTeacherName(this.selectedTeacher),
                    lineStyle: {
                        color: '#2FC25B'
                    },
                    areaStyle: {
                        color: 'rgba(47, 194, 91, 0.3)'
                    }
                });
                legendData.push(this.getTeacherName(this.selectedTeacher));
                
                // 后添加学院数据线（上层）
                if (this.radarChartData && this.radarChartData.value && this.radarChartData.value.length > 0) {
                    console.log('添加学院数据线：', this.radarChartData.value);
                    seriesData.push({
                        value: this.radarChartData.value,
                        name: '学院档案分析',
                        lineStyle: {
                            color: '#FACC14'
                        },
                        areaStyle: {
                            color: 'rgba(250, 204, 20, 0.3)'
                        }
                    });
                    legendData.push('学院档案分析');
                } else {
                    console.warn('学院雷达图数据为空，不显示学院数据线');
                }
                
                // 更新雷达图的数据
                this.option.series[0].data = seriesData;
                
                // 更新图例数据
                this.option.legend.data = legendData;
                
                console.log('最终图表配置：', {
                    seriesData: seriesData,
                    legendData: legendData
                });
                
                // 重新渲染雷达图
                this.$nextTick(() => {
                    const chartDom = this.$refs.echartradarRef1;
                    if (chartDom) {
                        // 获取或创建ECharts实例
                        let myChart = echarts.getInstanceByDom(chartDom);
                        if (!myChart) {
                            myChart = echarts.init(chartDom);
                        }
                        // 使用 notMerge: true 强制重新渲染
                        myChart.setOption(this.option, true);
                        console.log('老师雷达图已重新渲染', this.option);
                    }
                });
                
                console.log('老师雷达图数据已更新：', {
                    metrics: data.metrics,
                    values: data.value
                });
            } else {
                console.warn('老师雷达图数据格式不正确：', data);
            }
        },
        
        // 更新老师折线图数据
        updateTeacherLineChart(data) {
            if (data && Array.isArray(data)) {
                console.log('开始更新老师折线图数据：', data);
                
                // 更新折线图标题
                const teacherName = this.getTeacherName(this.selectedTeacher);
                this.lineChartTitle = `教师档案各维度发展趋势 (${teacherName})`;
                
                // 限制最多显示十年数据
                const limitedData = data.slice(0, 10);
                
                // 提取年份和维度数据
                const years = [];
                const dimensions = {
                    '个人荣誉': [],
                    '日常教学常规': [],
                    '教育教学改革': [],
                    '科学研究与社会服务': [],
                    '产教融合': []
                };
                
                // 按年份排序（从旧到新：23, 24, 25, 26）
                limitedData.sort((a, b) => {
                    const yearA = Object.keys(a)[0];
                    const yearB = Object.keys(b)[0];
                    return parseInt(yearA) - parseInt(yearB);
                });
                
                // 处理数据
                limitedData.forEach(item => {
                    const year = Object.keys(item)[0];
                    const yearData = item[year];
                    
                    years.push(year);
                    
                    // 提取各维度数据
                    Object.keys(dimensions).forEach(dimension => {
                        dimensions[dimension].push(yearData[dimension] || 0);
                    });
                });
                
                // 更新折线图配置
                this.options.xAxis.data = years;
                this.options.series.forEach(series => {
                    const dimensionName = series.name;
                    if (dimensions[dimensionName]) {
                        series.data = dimensions[dimensionName];
                    }
                });
                
                // 重新渲染折线图
                this.$nextTick(() => {
                    const chartDom = this.$refs.chartRef;
                    if (chartDom) {
                        // 获取或创建ECharts实例
                        let myChart = echarts.getInstanceByDom(chartDom);
                        if (!myChart) {
                            myChart = echarts.init(chartDom);
                        }
                        // 使用 notMerge: true 强制重新渲染
                        myChart.setOption(this.options, true);
                        console.log('老师折线图已重新渲染', this.options);
                    }
                });
                
                console.log('老师折线图数据已更新：', {
                    years: years,
                    dimensions: dimensions
                });
            } else {
                console.warn('老师折线图数据格式不正确：', data);
            }
        },
        
        // 重置筛选条件
        resetFilters() {
            this.selectedYear = '';
            this.selectedCollege = '';
            this.selectedProject = '';
            this.selectedTeacher = '';
            this.radarChartTitle = '教师档案综合评估';
            this.lineChartTitle = '教师档案各维度发展趋势';
            this.teacherLineChartData = null;
            this.teacherRadarLoading = false;
            this.teacherLineLoading = false;
            this.$message.info('已重置筛选条件');
            // 重新渲染图表显示默认数据
            this.initRadarChart();
            this.initLineChart();
        },
        
        // 获取年份名称
        getYearName(value) {
            const year = this.yearList.find(item => item.value === value);
            return year ? year.label : '';
        },
        
        // 获取学院名称
        getCollegeName(value) {
            const college = this.collegeList.find(item => item.value === value);
            return college ? college.label : '';
        },
        
        // 获取项目名称
        getProjectName(value) {
            const project = this.projectList.find(item => item.value === value);
            return project ? project.label : '';
        },
        
        // 获取老师名称
        getTeacherName(value) {
            const teacher = this.teacherList.find(item => item.value === value);
            return teacher ? teacher.label : value || '';
        },
        
        // 清空教师雷达图数据（只保留学院数据）
        clearTeacherRadarChart() {
            console.log('清空教师雷达图数据');
            
            // 如果有学院数据，只显示学院数据
            if (this.radarChartData && this.radarChartData.metrics && this.radarChartData.value) {
                this.option.radar.indicator = this.radarChartData.metrics.map(metric => ({
                    name: metric,
                    max: 5
                }));
                
                this.option.series[0].data = [
                    {
                        value: this.radarChartData.value,
                        name: '学院档案分析',
                        lineStyle: {
                            color: '#FACC14'
                        },
                        areaStyle: {
                            color: 'rgba(250, 204, 20, 0.3)'
                        }
                    }
                ];
                
                this.option.legend.data = ['学院档案分析'];
            } else {
                // 如果没有学院数据，显示默认空数据
                this.option.series[0].data = [
                    {
                        value: [0, 0, 0, 0, 0],
                        name: '暂无数据',
                        lineStyle: {
                            type: 'dashed',
                            color: '#ccc'
                        },
                        areaStyle: {
                            color: 'rgba(200, 200, 200, 0.1)'
                        }
                    }
                ];
                
                this.option.legend.data = ['暂无数据'];
            }
            
            // 重新渲染雷达图
            this.$nextTick(() => {
                const chartDom = this.$refs.echartradarRef1;
                if (chartDom) {
                    // 获取或创建ECharts实例
                    let myChart = echarts.getInstanceByDom(chartDom);
                    if (!myChart) {
                        myChart = echarts.init(chartDom);
                    }
                    myChart.setOption(this.option, true);
                    console.log('雷达图已清空教师数据');
                }
            });
        },
        
        // 清空折线图数据
        clearTeacherLineChart() {
            console.log('清空折线图数据');
            
            // 重置折线图标题
            this.lineChartTitle = '教师档案各维度发展趋势';
            
            // 清空所有系列数据
            this.options.xAxis.data = [];
            this.options.series.forEach(series => {
                series.data = [];
            });
            
            // 重新渲染折线图
            this.$nextTick(() => {
                const chartDom = this.$refs.chartRef;
                if (chartDom) {
                    // 获取或创建ECharts实例
                    let myChart = echarts.getInstanceByDom(chartDom);
                    if (!myChart) {
                        myChart = echarts.init(chartDom);
                    }
                    myChart.setOption(this.options, true);
                    console.log('折线图已清空');
                }
            });
        },
        
        refreshData() {
            this.loading = true;
            this.$api.get(SMARTLOCK_API.SELECT_ALL).then(res => {
                this.loading = false;
                // 刷新数据后重新渲染图表
                this.initRadarChart();
                this.initLineChart();
            });
        }
    }
}
</script>

<style scoped>
.teachers-file-folder {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #e4e7ed;
}

.header-left h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.charts-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-left, .chart-right {
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-left h3, .chart-right h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}

.filter-container {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-item label {
  font-weight: 600;
  color: #606266;
  white-space: nowrap;
  font-size: 14px;
  min-width: 40px;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

#echartradarRef1, #chartRef {
  border: none;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0;
}

/* 加载提示样式 - 放在图表下方 */
.chart-loading-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  margin-top: 10px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  color: #409EFF;
}

.chart-loading-tip i {
  font-size: 16px;
  animation: rotating 2s linear infinite;
}

.chart-loading-tip span {
  font-size: 14px;
  font-weight: 500;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.chart-left, .chart-right {
  position: relative;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .charts-container {
    flex-direction: column;
  }
  
  .chart-left, .chart-right {
    margin-bottom: 20px;
  }
}
</style>